<template>
  <div class="main-search-bar">
    <div class="main-dropdown">
      <select v-model="selectedJobType">
        <option value="">职位类型</option>
        <option value="fulltime">全职</option>
        <option value="parttime">兼职</option>
        <option value="intern">实习</option>
      </select>
    </div>
    <input
      type="text"
      v-model="searchQuery"
      placeholder="搜索职位、公司"
      class="main-search-input"
    />
    <button class="main-search-button" @click="performSearch">搜索</button>
  </div>
</template>
<script setup>
import { ElMessage } from 'element-plus'
import { ref } from 'vue'
import router from '../router'
import { dataCacheStore } from '@/stores'
const dataCache = dataCacheStore()

const selectedJobType = ref('')
const searchQuery = ref('')

const emit = defineEmits(['search'])

const performSearch = () => {
  if (searchQuery.value == '') {
    ElMessage({
      type: 'error',
      message: '请输入搜索关键词！'
    })
    return false
  }
  dataCache.setSearchKey(searchQuery.value)
  dataCache.setJobType(selectedJobType.value)
  console.log(dataCache.getSearchKey)

  // 触发父组件的 search 事件，并传递搜索参数
  emit('search', {
    key: searchQuery.value,
    selectedJobType: selectedJobType.value
  })
  router.push({
    path: '/search',
    query: { key: searchQuery.value, selectedJobType: selectedJobType.value }
  })
}
</script>
<style lang="scss" scoped>
.main-search-bar {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 0;
  max-width: 800px;
  border: 2px solid #409eff;
  margin: 1.5rem auto;
  margin-bottom: 0.5rem;
  .main-dropdown {
    position: relative;
  }

  .main-dropdown select {
    appearance: none;
    background-color: transparent;
    border: none;
    padding: 8px 24px 8px 8px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
  }
  .main-dropdown::after {
    content: '\25BC';
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    pointer-events: none;
    color: #94c9fe;
  }
  .main-search-input {
    flex-grow: 1;
    border: none; /* Static teal border color */
    padding: 8px;
    font-size: 14px;
    color: #000;
    background-color: #ffffff;
    border-radius: 4px;
    margin: 0 4px;
    // height: 1.5rem;
  }

  .main-search-input::placeholder {
    color: #999;
  }

  .main-search-input:focus {
    outline: none;
    border-color: #409eff; /* Keep the same border color when focused */
  }
  .main-search-button {
    background-color: #409eff;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    padding: 10px 16px;
    font-size: 20px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  .main-search-button:hover {
    background-color: #067df4;
  }
}
</style>
